<template>
  <div class="hot-list">
    <!-- <a class="banner">
      <img src="https://media.wxcwy.com/mini/images/indexpdut_banner.png" class="img-size-100">
    </a> -->
    <div class="list-box" v-if="list.length > 0">
      <a
        :url="'/shop/productDetails/productDetails?id=' + item.id"
        v-for="(item, index) in list"
        hover-class="none"
        :key="index"
      >
      <div class="item">
        <div>
          <div class="pic-box">
            <img :src="item.cover_picture" class="img" />
            <text class="tips" v-if="item.promote_tag">{{
              item.promote_tag
            }}</text>
            <text class="inventory" v-if="item.is_sold_out == 1"
              >售罄
              <!-- <text class="triangle-box"></text> -->
            </text>
          </div>
        </div>
        <div style="position: relative;width: 100%;">
          <div class="title">
            {{ item.title }}
          </div>
          <div class="tag">
                <div class="spike" v-if="item.special_tag">
                    {{ item.special_tag }}
                  </div>
          </div>
          <div class="price-info">
            <div class="left">
              <div class="present">
                <text>美粉币</text>
                <text class="number">{{ item.lowest_price_name }}</text>
              </div>
              <div class="old" v-if="item.virtual_price">
                {{ item.virtual_price }}
              </div>
            </div>
            <div class="right" v-if="item.virtual_sales">
              销量 {{ item.virtual_sales }}
            </div>
          </div>
        </div>
      </div>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  props: { list: Array },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.hot-list {
  color: #333;
  font-size: 26rpx;
  padding: 0 30rpx;

  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .banner {
    display: block;
    height: 165rpx;
  }
  .list-box {
    margin: 20rpx 0;
    overflow: hidden;
    .item {
      display: flex;
      margin-bottom: 20rpx;
      .pic-box {
        position: relative;
        margin-right: 20rpx;
          .img{
            width: 240rpx;
            height: 240rpx;
            border-radius: 8rpx;
          }
        .inventory {
          width: 100%;
          color: #fff;
          font-size: 24rpx;
          line-height: 44rpx;
          background: #9b9b9b;
          position: absolute;
          left: 0;
          bottom: 8rpx;
          text-align: center;
          border-bottom-left-radius: 8rpx;
          border-bottom-right-radius: 8rpx;
          .triangle-box {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 36rpx 0 0 20rpx;
            border-color: transparent transparent transparent #9b9b9b;
            position: absolute;
            top: 0;
            right: -20rpx;
          }
        }
        .tips {
          position: absolute;
          top: 20rpx;
          left: 0;
          height: 34rpx;
          line-height: 34rpx;
          background: #ee4130;
          color: #fff;
          border-radius: 4rpx;
          padding: 0 20rpx;
          font-size: 24rpx;
        }
      }
      .title {
        line-height: 40rpx;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 28rpx;
      }
      .tag{
          position: absolute;
          bottom:70rpx;
          .spike {
            width: fit-content;
            color: #ff7900;
            border: 1px solid #ff7900;
            border-radius: 6rpx;
            padding: 0 8rpx;
            margin-right: 20rpx;
            box-sizing: border-box;
          }
        }
      .price-info {
        height: 45rpx;
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 12rpx;
        align-items: center;
        width: 100%;
        .left {
          display: flex;
          align-items: center;
          color: #ff7900;
          .number {
            font-size: 40rpx;
          }
          .old {
            color: #9f9f9f;
            text-decoration: line-through;
            margin-left: 11rpx;
          }
        }
        .right {
          color: #9f9f9f;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
